<template>
  <p-form-model :model="form" :rules="rules" layout="inline">
    <p-form-model-item label="年月">
      <p-month-picker
        v-model="form.date"
        :allow-clear="false"
        :default-value="now"
        @change="onChange"
      />
    </p-form-model-item>
    <p-button type="primary" class="btn-search" @click="handleSearch">
      搜索
    </p-button>
    <p-button @click="handleReset">重置</p-button>
  </p-form-model>
</template>
<script>
export default {
  data() {
    return {
      form: {
        date: '',
      },
      now: '',
    };
  },
  created() {
    this.getTime();
  },
  methods: {
    getTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const month2 = month < 10 ? '0' + month : month;
      const nowTime = year + '-' + month2;
      this.now = nowTime;
      this.form.date = nowTime;
    },
    handleSearch() {
      this.$emit('search', this.form);
    },
    handleReset() {
      this.getTime();
      this.$emit('search', this.form);
    },
    onChange(date, dateString) {
      console.log('dateString: ', dateString);
      this.form.date = dateString;
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  padding: 10px 20px;
  width: 100%;
  border-bottom: 1px solid #e5e6e9;
}
.poros-form-item {
  width: 20%;
  margin-bottom: 0;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
</style>
